<template>
    <view class="list-warp">
        <view v-for="(BTtem, BIndex) in newList"
              :key="BIndex"
              class="column-warp">
            <view v-for="(item, index) in BTtem"
                  :key="index"
                  @click="jumpFn(item)"
                  class="list-box">
                <image v-if="item.image" class="img" :src="item.image" mode="widthFix"/>
                <view class="text">{{ item.title }}{{item.id}}</view>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
    import {computed, ref} from 'vue'

const props = withDefaults(
    defineProps<{
        list: any,
        content: any,
    }>(),
    {
        list: [],
        content: {enabled: 1},
    }
)

const newList = computed(() => {
    return [
        props.list.filter((item:any, index:number) => index % 2 === 0),
        props.list.filter((item:any, index:number) => index % 2 === 1),
    ]
})

//跳转
const jumpFn = (item: object) => {
    // const url = item.link
    const url = '/packages/pages/recharge/recharge'
    uni.navigateTo({url})
}

</script>

<style lang="scss" scoped>
    .list-warp {
        display: flex;
        flex-flow: row;
        flex-wrap: wrap;
        justify-content: space-between;
        //display: flex;
        //flex-direction: column;
        //flex-wrap: wrap; /* 需要指定高度 */
        //height: 1600px;
        //column-count: 2;
        //column-gap: 30rpx;
        padding: 40rpx 4%;
        .column-warp{
            flex: 0 0 48%;
        }
        
        .list-box {
            //flex: 0 0 48%;
            //width: 50%;
            break-inside: avoid;
            background: #ffffff;
            border-radius: 15rpx;
            overflow: hidden;
            padding-bottom: 30rpx;
            margin-bottom: 30rpx;
            //&:nth-child(2n){
            //    order: 2;
            //}
            //&:nth-child(2n+1){
            //    order: 1;
            //}
            .img {
                width: 100%;
            }
            .text {
                min-height: 90rpx;
                line-height: 45rpx;
                margin-top: 20rpx;
                padding: 0 20rpx;
                //-webkit-line-clamp: 2;
                //overflow: hidden;
                //word-break: break-all;
                //text-overflow: ellipsis;
                //display: -webkit-box;
                //-webkit-box-orient: vertical;
            }
        }
    }
</style>
